<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" v-model="openFlag" title="详情" width="50%" append-to-body>
      <div class="body">
        <div class="left">
          <div class="list">
            <div @click="choose(item)" v-for="item in leftList" class="item" :class="{ 'on': item.selected }">{{ item.label }}</div>
          </div>
        </div>
        <div class="right">
          <component :is="selectedItem.component"></component>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>

import api from "@/api/asset/apply.js";

import BaseInfo from './BaseInfo.vue'
import AssetList from "@/components/Workflow/AuditDetail/AssetList.vue";
import AuditProcess from "@/components/Workflow/AuditProcess.vue";

const detailInfo = ref({});
provide('detailInfo', detailInfo);

const emit = defineEmits(['sub']);

// 是否编辑
const leftList = reactive([{
  selected: true,
  label: '基本资料',
  component: BaseInfo
}, {
  selected: false,
  label: '资产列表',
  component: AssetList
}, {
  selected: false,
  label: '审批流程',
  component: AuditProcess
}]);

const selectedItem = computed(()=> {
  return leftList.find(item=>item.selected);
})

const openFlag = ref(false);

function reset() {
  detailInfo.value = {};
}

function choose(item) {
  leftList.forEach(item => {
    item.selected = false;
  });
  item.selected = true;
}

function open(applyId) {
  openFlag.value = true;
  reset();
  api.detail(applyId).then(response=> {
    detailInfo.value = response;
  })
}

defineExpose({
  open
})

</script>

<style scoped lang="scss">
  .body {
    height: 400px;
    display: flex;
    .left {
      width: 110px;
      height: 100%;
      background-color: #f2f4f7;
      flex-shrink: 0;
      .list {
        padding-top: 24px;
        .item {
          height: 44px;
          line-height: 44px;
          font-size: 14px;
          color: #0b1019;
          padding-left: 24px;
          cursor: pointer;
          &.on {
            color: #005bf5;
            background-color: #fff;
          }
        }

      }
    }
    .right {
      width: calc(100% - 110px);
      height: 100%;
      padding: 24px 24px 20px;
      box-sizing: border-box;
      overflow-y: auto;
    }
  }

</style>

